<template>
  <scroll-view scroll-y class="store-dashboard">
    <view class="charts-section flex items-center">
      <view class="chart-container">
        <view class="chart-title">销售额</view>
        <view class="chart-subtitle">金额 (元)</view>
        <view class="box">
          <view class="chart">
            <JnChart canvasId="line1" :option="optionLine1" lazyLoad @init="handleInit1" />
          </view>
        </view>
      </view>
      <view class="chart-container">
        <view class="chart-title">客流量</view>
        <view class="chart-subtitle">人数 (人)</view>
        <view class="box">
          <view class="chart">
            <JnChart canvasId="line2" :option="optionLine2" lazyLoad @init="handleInit2" />
          </view>
        </view>
      </view>
    </view>
    <view class="pie-chart-section">
      <view class="section-title">员工表现</view>
      <view class="flex items-center">
        <view class="chart-container">
          <view class="chart-title">销售额</view>
          <view class="box">
            <view class="chart">
              <JnChart canvasId="line3" :option="optionLine3" lazyLoad @init="handleInit3" />
            </view>
          </view>
        </view>
        <view class="chart-container">
          <view class="chart-title">学习表现</view>
          <view class="chart-subtitle">学习课程数</view>
          <view class="box">
            <view class="chart">
              <JnChart canvasId="line4" :option="optionLine4" lazyLoad @init="handleInit4" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import JnChart from './components/jn-chart/index.vue'
import { shopApi } from "@/api";
let optionLine1 = ref({})
let optionLine2 = ref({})
let optionLine3 = ref({})
let optionLine4 = ref({})

const handleInit1 = () => {

}

const handleInit2 = () => {

}

const handleInit3 = () => {

}
const handleInit4 = () => {

}

// 饼图
function getOptionArea(datasource) {
  const { values = [], names = [] } = datasource || {}

  const option = {
    tooltip: {
      show: true,
      trigger: 'axis',
      confine: true,
      formatter: (params) => {
        const { value, name } = params[0]

        return `${name}\n${value}`
      }
    },
    legend: {
      type:"scroll",
      orient: 'vertical',
       
      right: '1%',
      top: 'bottom',
      data: names
    },
    series: [
      {
        name: '销售额',
        type: 'pie',
        radius: '55%',
        center: ['30%', '50%'], // 控制饼图的位置
        avoidLabelOverlap: false,
        label: {
          show: false,
          formatter: '{b}: {d}%'
        },
        data: names.map((name, index) => ({
          value: values[index],
          name: name
        }))
      }
    ]
  }
  return option
}

function getOption(datasource) {
  const { values = [], names = [] } = datasource || {};

  const option = {
    grid: {
      top: '5%',
      left: '5%',
      right: '5%',
      bottom: '15%', // 增大底部边距，避免标签被截断
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      confine: true,
      formatter: (params) => {
        const { value, name } = params[0];
        return `${name}\n${value}`;
      }
    },
    xAxis: {
      type: 'category',
      data: names.length ? names : [''],
      axisLabel: {
        interval: 0, // 强制显示所有标签
        rotate: 45,   // 标签倾斜显示，避免重叠
        formatter: (value) => value // 可选：对标签内容进行格式化
      },
      axisTick: {
        alignWithLabel: true // 确保刻度线与标签对齐
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: values.length ? values : [0], // 显示默认数据
        type: 'line',
        smooth: true
      }
    ]
  };

  return option;
}


//柱状图
function getOptionBar(datasource) {
  const { values = [], names = [] } = datasource || {}

  const option = {
    grid: {
      top: '5%',
      left: '5%',
      right: '5%',
      bottom: 0,
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: names
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: values,
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  }

  return option
}

// 查询首页学习表现数据
const getIndexStudyData = () => {
  shopApi.SHOPGETFRONTUSERRECHARGERECORDLIST().then((res) => {
    if (res.code == 200) {
      const data = {
        names: res.result.map(item => item.name),
        values: res.result.map(item => item.count)
      }
      optionLine4.value = getOptionBar(data)

    }
    })
  }

    // 查询首页销售额
    const getIndexSales = () => {
    shopApi.SCANPAYGETINDEXSALES().then((res) => {
        if (res.code == 200) {
          const data = {
            names: res.result.map(item => item.name),
            values: res.result.map(item => item.count)
          }
          optionLine1.value = getOption(data)
        } else {
            uni.showToast({ title: res.errMsg, icon: "none" });
        }

    })
  }
  // 查询首页员工销售额
  const getIndexShopStaffSales = ()=>{
    shopApi.SCANPAYGETINDEXSHOPSTAFFSALES().then((res) => {
      if (res.code == 200) {
        const data = {
            names: res.result.map(item => item.name),
            values: res.result.map(item => item.count)
          }
          optionLine3.value = getOptionArea(data)
      }
    })
  }
  onMounted(async () => {
    await getIndexStudyData()
    await getIndexVisit()
    await getIndexSales()
    getIndexShopStaffSales()
  
  })

// 查询首页客流量数据
const getIndexVisit = () => {

  shopApi.SHOPGETINDEXVISIT().then((res) => {
    if (res.code == 200) {
      const data = {
        names: res.result.map(item => item.name),
        values: res.result.map(item => item.count)
      }
      optionLine2.value = getOption(data)
    }
  })
}

</script>

<style lang="scss" scoped>
.store-dashboard {
  background-color: #fff;
  padding-bottom: 100rpx;
  margin-top: 24rpx;
  .chart-container {
    flex: 1;
  }

  .charts-section,
  .pie-chart-section {
    background-color: #fff;
    padding: 20rpx;
    box-sizing: border-box;

    .chart-title {
      font-size: 28rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
    }

    .chart-subtitle {
      font-size: 24rpx;
      color: #999;
      margin-bottom: 20rpx;
    }

    .chart {
      height: 150px;
    }

    .box {
      height: 260rpx;

      &+.box {
        margin-top: 30rpx;
      }
    }
  }

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .featured-products,
  .hot-selling,
  .recommended-products {
    background-color: #fff;
    margin-top: 20rpx;
    padding: 20rpx;

    .product-scroll {
      white-space: nowrap;

      .product-item {
        display: inline-block;
        margin-right: 20rpx;
        width: 200rpx;

        image {
          width: 200rpx;
          height: 200rpx;
          border-radius: 10rpx;
        }

        .product-name {
          font-size: 24rpx;
          margin-top: 10rpx;
        }

        .product-price {
          font-size: 28rpx;
          color: #c4996c;
          font-weight: bold;
        }
      }
    }
  }

  .hot-selling {
    .hot-product {
      position: relative;

      image {
        width: 100%;
        height: 300rpx;
        border-radius: 10rpx;
      }

      .product-info {
        position: absolute;
        bottom: 20rpx;
        left: 20rpx;
        color: #fff;

        .product-name {
          font-size: 32rpx;
          margin-bottom: 10rpx;
        }

        .product-price {
          font-size: 36rpx;
          font-weight: bold;
        }
      }
    }
  }

  .recommended-products {
    .product-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20rpx;

      .product-card {
        background-color: #fff;
        border-radius: 10rpx;
        overflow: hidden;

        image {
          width: 100%;
          height: 300rpx;
        }

        .product-info {
          padding: 20rpx;

          .product-name {
            font-size: 28rpx;
            margin-bottom: 10rpx;
          }

          .product-price {
            font-size: 32rpx;
            color: #c4996c;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>